<template>
  <table
    id="table"
    border="0"
    cellspacing="0"
    cellpadding="0"
    width="100%"
    class="table"
  >
    <thead>
      <tr style="background-color:#E7F4FF">
        <td>任务名称</td>
        <td>执行时间</td>
        <td>执行人</td>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="(item,index) in listData"
        :key="index"
        :style="getStyle(index)"
        @click="handleCheck"
      >
        <td>{{ item.name }}</td>
        <td>{{ item.executionStartTime }}</td>
        <td>{{ item.createUser }}</td>
      </tr>
    </tbody>
  </table>

</template>
<script>
import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue'
import { getNewInspectionList } from '@/api/inspection/index.js'
import { router } from '@/router/index'
export default defineComponent({
  name: 'TaskList',
  setup(props, { emit }) {
    const data = reactive({
      columns: [
        {
          title: '任务名称',
          key: 'name',
          width: 150,
          align: 'center'

        },
        {
          title: '执行时间',
          key: 'executionStartTime',
          width: 200,
          align: 'center'
        },
        {
          title: '执行人',
          key: 'createUser',
          align: 'center'
        }
      ],
      listData: []
    })
    // 获取任务列表数据
    const getTaskData = () => {
      getNewInspectionList().then(({ data }) => {
        addListContent(data)
      })
    }
    const addListContent = (newData) => {
      if (newData) {
        if (newData.length > 5) {
          data.listData = newData.slice(0, 5)
        } else {
          data.listData = newData
        }
      }
    }
    const handleCheck = () => {
      router.push({ path: '/task-manage/task-all' })
    }
    const getStyle = (index) => {
      if (index % 2 == 0) {
        return { 'background-color': '#fff' }
      } else {
        return { 'background-color': '#E7F4FF' }
      }
    }
    onMounted(() => {
      getTaskData()
    })
    return {
      ...toRefs(data),
      handleCheck,
      getStyle

    }
  }
})
</script>
<style scoped lang="scss">
.table {
  font-size: 14px;
  font-family: Noto Sans SC-Regular, Noto Sans SC;
  font-weight: 400;
  color: #333333;

  tr {
    height: 34px;
    cursor:pointer;
  }
}
</style>
